import React, { useEffect, useState } from 'react';

const useBestWidth = () => {
    const [windowSize, setWindowSize] = useState<{ width: number, height: number; }>({
        width: window.innerWidth, height: window.innerHeight
    });
    const resetWindowSize = () => setWindowSize({width: window.innerWidth, height: window.innerHeight})
    useEffect(() => {
        window.addEventListener('resize', resetWindowSize);
        return () => window.removeEventListener('resize', resetWindowSize)
    })
    const ratio = windowSize.width / windowSize.height;
    if (Number.isNaN(ratio)) return windowSize.width;
    if (ratio >= 3) return windowSize.width * 0.5;
    if (ratio >= 2) return windowSize.width * 0.6;
    if (ratio >= 16 / 9) return windowSize.width * 0.8;
    if (ratio >= 4 / 3) return windowSize.width * 0.9;
    return windowSize.width;
};

export default (props: { children: JSX.Element | JSX.Element[]; }) => <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
    <div style={{ width: useBestWidth() }}>{props.children}</div>
</div>;